<template>
  <div class="single-page-container">
    <div class="single-page-content">
      <h5 class="title">Feijiu实时数据监测平台</h5>
      <div class="list">
        <div class="item disable" @click="handleClick(0)">
          <van-icon name="manager" size="40px" />
          <p class="text">供应</p>
        </div>
        <div class="item disable" @click="handleClick(1)">
          <van-icon name="balance-list" size="40px" />
          <p class="text">求购</p>
        </div>
        <div class="item" @click="handleClick(2)">
          <van-icon name="shop" size="40px" />
          <p class="text">资产处置</p>
        </div>
        <div class="item disable" @click="handleClick(3)">
          <van-icon name="shopping-cart" size="40px" />
          <p class="text">招标拍卖</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  props: {},
  data() {
    return {}
  },
  created() {},
  mounted() {},
  methods: {
    handleClick(index) {
      if (index === 2) {
        this.$router.push('/realTimeData/assetDisposal')
      } else {
        this.$toast('暂未开通')
      }
    },
  },
}
</script>

<style scoped lang="scss">
.single-page-container {
  width: 100vw;
  min-height: 100vh;
  font-size: 26rpx;
  color: #409eff;
  background: #ffffff;
}

.single-page-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 80rpx;
}

.title {
  font-size: 50rpx;
  font-weight: bold;
}
.list {
  margin-top: 20rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  padding-left: 100rpx;
  .item {
    width: 260rpx;
    height: 260rpx;
    margin-right: 30rpx;
    margin-bottom: 30rpx;
    border: 1px solid #409eff;
    border-radius: 6rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 20rpx;
    &:nth-child(2n) {
      margin-right: 0;
    }
    .text {
      font-size: 30rpx;
      font-weight: bold;
    }
    &.disable {
      filter: grayscale(100%);
    }
  }
}
</style>
